<script setup lang="ts">
/**
 * @name EnergManagement
 * @description 能源折标系数配置
 */
import {
  Delete,
  Edit,
  Plus,
} from '@element-plus/icons-vue'
import type { Action } from 'element-plus'
import { FormModal } from './components'
import { defaultFormData } from './index'
import type {
  EnergyInfo,
  EnergySaveOrUpdateParams,
  TableColumn,
} from '@/types'
import { energyApi } from '@/api'
// ------------------use------------------
// #region
const { $confirm, $message } = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<EnergyInfo[]>(
  [],
)
const [formData, setFormData] = useState<
  Partial<EnergySaveOrUpdateParams>
>({ ...defaultFormData })
const [formModalTitle, setFormModalTitle]
  = useState<string>('')
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<Required<EnergyInfo>>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '能源名称',
    prop: 'name',
  },
  {
    key: uuid(),
    label: '能源代码',
    prop: 'code',
  },
  {
    key: uuid(),
    label: '能源单位',
    prop: 'energyUnit',
  },
  {
    key: uuid(),
    label: '折标系数',
    prop: 'discountFactor',
  },
  {
    key: uuid(),
    label: '折标系数单位',
    prop: 'discountFactorUnit',
  },
  {
    key: uuid(),
    label: '参考折标系数',
    prop: 'referenceCoefficient',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const modalRef = ref<InstanceType<typeof FormModal>>()
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function deleteData(id: number) {
  const res: Action = await $confirm(
    '该操作将永久删除该数据，确定删除？',
    '警告',
    {
      type: 'warning',
    },
  ).catch(e => e)

  if (res !== 'confirm')
    return
  const { code } = await energyApi.deleteById(id)
  if (code !== 200)
    return
  getTableData()
}
async function showEditDialog(row: EnergySaveOrUpdateParams) {
  modalRef.value?.open()
  await nextTick()
  setFormModalTitle('编辑')
  setFormData({ ...defaultFormData, ...row })
}
async function showAddDialog() {
  modalRef.value?.open()
  await nextTick()
  setFormModalTitle('新增')
  setFormData({ ...defaultFormData, id: undefined })
}
async function getTableData() {
  const { data: res } = await withLoading(
    energyApi.queryList,
  )()
  setTableData(res)
}
async function addOrUpdateData(row: Partial<EnergySaveOrUpdateParams>) {
  const params = { ...row }
  removeUnnecessaryParams(params)
  const { code } = await energyApi.saveOrUpdate(params)
  if (code !== 200)
    return
  getTableData()
  modalRef.value?.close()
  $message.success('保存成功！')
}

// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
    >
      <template #actions>
        <el-button
          plain
          type="success"
          :disabled="!$power('add')"
          :icon="Plus"
          @click="showAddDialog"
        >
          新增
        </el-button>
      </template>
      <template #operate="{ row }">
        <TdButton
          title="编辑"
          :icon="Edit"
          type="primary"
          @click="showEditDialog(row)"
        />
        <el-divider direction="vertical" />
        <TdButton
          title="删除"
          :icon="Delete"
          type="danger"
          @click="deleteData(row.id)"
        />
      </template>
    </view-table>

    <FormModal
      ref="modalRef"
      v-model:data="formData"
      :title="formModalTitle"
      @save-success="addOrUpdateData(formData)"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
